<template>
    <div class="el-main">
        <el-row display="margin-top:10px">
            <el-col :span="4">
                <el-input aria-placeholder="请输入书名" v-model="input"></el-input>
            </el-col>
            <el-button @click="addBook()" type="primary">新增</el-button>

        </el-row>
        <el-row>
            <el-table :data="bookList" border style="width: 100%">
                <el-table-column label="编号" min-width="100" prop="id">
                    <template scope="scope">{{scope.row.pk}}</template>
                </el-table-column>
                <el-table-column label="书名" min-width="100" prop="book_name">
                    <template scope="scope">{{scope.row.fields.book_name}}</template>
                </el-table-column>
                <el-table-column label="添加时间" min-width="100" prop="add_time">
                    <template scope="scope">{{scope.row.fields.add_time}}</template>
                </el-table-column>
            </el-table>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "Home",
        data() {
            return {
                input: '',
                bookList: []
            }
        },
        mounted() {
            this.showBooks();
        },
        methods:{
            addBook(){
                this.$http.get(
                    'http://127.0.0.1:8000/api/add_book?book_name='+this.input
                ).then((response)=>{
                    console.log(response.data);
                    var res = response.data;

                    if(res.error_num==0){
                        this.showBooks()
                    }else {
                        this.$message.error('新增书籍失败。');
                        console.log(res.msg)
                    }
                })
            },
            showBooks(){
                this.$http.get(
                    'http://127.0.0.1:8000/api/show_book'
                ).then((response)=>{
                    var res = response.data
                    if(res.error_num==0){
                        console.log(res.list)
                        this.bookList = res.list
                    }else {
                        this.$message.error('展示失败')
                        console.log(res.msg)
                    }
                })
            }
        }
    }
</script>

<style scoped>
    h1, h2 {
        font-weight: normal;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        display: inline-block;
        margin: 0 10px;
    }

    a {
        color: #42b983;
    }
</style>